<template>
  <SwModal :isShow.sync="isShowPayImg" :isShowBg="true" :okText="''" :isCloseOnClickBg="true">
    <div class="viewVouchers">
      <a class="close" @click="closeViewVouchers">
        <img src="./../images/close2.png" @click="isShowPayImg = false"></a>
      <div class="swiper-container swiperCtc">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in uploadedImgs">
            <div :style="{'background-image': 'url(' + item.Img + ')', 'background-size': 'contain', 'background-repeat': 'no-repeat', width: '100%', height: '100%', 'background-position':'center center'}"></div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </SwModal>
</template>

<script>
import Swiper from 'swiper'
import SwModal from '@/components/SwModal'

export default {
  props: [
    'lang',
    'propIsShowPayImg',
    'currentOrderItem'
  ],
  data () {
    return {
      isShowPayImg: false,
      uploadedImgs: []
    }
  },
  components: {
    SwModal
  },
  watch: {
    isShowPayImg (nv) {
      this.$emit('update:propIsShowPayImg', nv)
    },
    propIsShowPayImg (nv) {
      this.isShowPayImg = nv
      if (nv === true) this.init()
    }
  },
  methods: {
    // 关闭 查看支付凭证
    closeViewVouchers () {
      this.isShowPayImg = false
    },
    // 查看凭证切换效果
    swiperCtc () {
      new Swiper('.swiperCtc', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
      })
    },
    getUploadedImgs () {
      this.$host2.post('Appeal/GetOrderPayCertInfo', {
        detailID: this.currentOrderItem.ID
      }).then((res) => {
        if (res.Data && res.Data.Imgs && res.Data.Imgs.length) {
          this.uploadedImgs = res.Data.Imgs

          this.$nextTick(() => {
            this.swiperCtc()
          })
        }
      })
    },
    reset () {
      this.uploadedImgs = []
    },
    init () {
      this.reset()
      this.getUploadedImgs()
    }
  },
  mounted () {
  }
}
</script>

<style lang="less">
@import './../../../assets/css/swiper.min.css';
@import './../css/common.less';

.modal {

  .viewVouchers {
    width: 880px;
    height: 640px;
    border-radius: 8px;
    position: relative;

    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 10;
    }

    .swiperCtc {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;

      .swiperCtc .swiper-pagination-bullet {
        background: rgba(139,180,245,.5);
      }

      .swiperCtc .swiper-pagination-bullet-active {
        background: #8bb4f5;
      }

      .swiperCtc .swiper-slide {
        height: 100%;
      }
    }
  }
}
</style>
